<template>
  <div class="typeItem" :style="{ maxHeight: isShowType ? '80px' : 'none' }">
    <div class="titem" v-if="staus === 0 ? false : true">
      <el-button type="text" @click="chooseType(0)">全部</el-button>
    </div>
    <div v-for="type of props.dataList" :key="type.id" class="titem">
      <el-button type="text" @click="chooseType(type.id)">{{ type.name }}</el-button>
    </div>
    <div class="switch">
      <el-button
        type="text"
        style="width: 40px; border-radius: 40%; height: 20px; background: #fff"
        @click="showType"
      >
        {{ isShowType ? '展开' : '收起' }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  dataList: {
    type: Array,
    default: null
  }
})

const staus = ref(0)

const emit = defineEmits(['choose-menu'])

const isShowType = ref(true)
const showType = () => {
  isShowType.value = !isShowType.value
  console.log('执行')
}

const chooseType = (id) => {
  staus.value = id
  emit('choose-menu', id)
}
</script>

<style scoped>
.typeItem {
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-top: 15px;
  background: #fff;
  border-radius: 5px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 10px 5px rgba(254, 254, 254, 0.4);
}

.titem {
  text-align: center;
  width: 100px;
  height: 40px;
  line-height: 40px;
}

.switch {
  position: absolute;
  left: 96%;
  top: 85%;
}

.el-button {
  border: 0;
}
</style>
